<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* *代表所有元素*/
			body{
				background-color:rgb(0,102,102);
			}
			ul{
				border:2px solid orangered; /*大边框线,2px,橙色*/
				width: 726px;  /*宽度*/
				/*去除圆点*/
				list-style-type: none;
				/*上下20px,auto左右居中*/
				margin:20px auto;
			}
			li{
				/*绝对定位 以li为参考*/
				/*position: relative;*/
				float: left; /*左浮动*/
				border: 2px solid orangered; /*图片外框线,橙色*/
				padding:10px ;/*图片边框大小*/
				margin: 9px; /*图片间距*/
				background-color:rgb(204,204,204); /*图片框背景颜色*/
			}
			img{
				width: 200px;  /*照片大小*/
				height: 200px;
			}
			p{
				/*position: absolute;*/ /*绝对定位，以li为参考，移动p标签*/
				/*bottom: 40px; *//*向上偏移40px*/
				text-align: center; /*文本框居中*/
			}
			/* 相对定位，鼠标在li上悬停,让li向右上方偏移2px,实现抖动*/
			li:hover{
				position: relative;
				left: 2px; /*左边往右，指最左的边*/
				top: -2px; /*上边往上*/
			}
			.div0{
				clear: both;
			}
			.jumpTop{
				
				width: 80px;
				height: 40px;
				border: 1px solid red;
				text-align: center;
				line-height: 20px;
				/*固定定位*/
				position: fixed;
				bottom: 20px;
				right: 20px;
				
				
				
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<img src="../IMG/01.jpg" />
				<p>java01</p>
			</li>
			<li>
				<img src="../IMG/02.jpg" />
				<p>java02</p>
			</li>
			<li>
				<img src="../IMG/03.jpg" />
				<p>java03</p>
			</li>
			<li>
				<img src="../IMG/04.jpg" />
				<p>java04</p>
			</li>
			<li>
				<img src="../IMG/05.jpg"/>
				<p>java05</p>
			</li>
			<li>
				<img src="../IMG/06.jpg"/>
				<p>java06</p>
			</li>
			<li>
				<img src="../IMG/06.jpg"/>
				<p>java06</p>
			</li>	
			<div class="div0"></div>
		</ul>
		<div class="jumpTop">
			<a href="#"> 回顶部</a>
		</div>
	</body>
</html>
